import React, { Component } from 'react';
import { createRoot } from 'react-dom/client';
//先得到一个ColorContext对象，里面有两个属性，也就是两个组件
//一个是Provider 提供上下文值的组件，用于接收value属性并把值向下级组件进行传递
//一个是Consumer消费者，用于读取Provider提供的上下文值
const ColorContext = React.createContext();
const baseStyle = {
    margin: '5px', padding: '5px',
    borderColor: 'black',
    borderWidth: '2px',
    borderStyle: 'solid'
};
function Title() {
    //如果想在函数组件中获取ColorContext.Provider提供的value值
    //可以使用ColorContext.Consumer组件
    //Consumer组件儿子是一个函数，函数的参数就是value值
    //函数的返回值就是你想要渲染的JSX或者说元素或者虚拟DOM
    return (
        <ColorContext.Consumer>
            {
                (value) => (
                    <div style={{ ...baseStyle, borderColor: value.color }}>
                        <p>Title</p>
                    </div>
                )
            }
        </ColorContext.Consumer>
    )
}
class Header extends Component {
    //给类组件添加1个静态属性contextType,值就是ColorContext
    //然后就可以在组件的render方法中通过this.context获取到ColorContext.Provider的value属性的值 
    //contextType属性名是定死 this.context也是定死的名称
    static contextType = ColorContext
    render() {
        return (
            <div style={{ ...baseStyle, borderColor: this.context.color }}>
                <p>Header</p>
                <Title />
            </div>
        )
    }
}

function Content() {
    return (
        <ColorContext.Consumer>
            {
                (value) => (
                    <div style={{ ...baseStyle,borderColor:value.color }}>
                        <p>Content</p>
                        <button onClick={()=>value.changeColor('red')}>变红</button>
                        <button onClick={()=>value.changeColor('green')}>变绿</button>
                    </div>
                )
            }
        </ColorContext.Consumer>

    )
}
class Main extends Component {
    //给类添加一个静态属性contextType值就是ColorContext
    //添完之后就可以在render方法中通过this.context获取value值，就是color:red
    static contextType = ColorContext
    render() {
        return (
            <div style={{ ...baseStyle, borderColor: this.context.color }}>
                <p>Main</p>
                <Content />
            </div>
        )
    }
}
class Page extends Component {
    state = { color: 'red' }
    changeColor = (color)=>{
        this.setState({color});
    }
    render() {
        //先创建一个value对象
        let value = { color: this.state.color,changeColor:this.changeColor }
        //然后作为value属性传递给ColorContext.Provider
        //此Provider组件的所有的下级组件都可以获得到此value值
        return (
            <ColorContext.Provider value={value}>
                <div style={{ ...baseStyle, width: '300px', borderColor: this.state.color }}>
                    <p>Page</p>
                    <Header />
                    <Main />
                </div>
            </ColorContext.Provider>
        )
    }
}
let element = <Page />
let root = createRoot(document.getElementById('root'))
root.render(element);
